<template>
	<view class="">
		
		<view class="content">
			<view class="player-videodisc">
				<image src="/static/record.png" class=""></image>
				<image  :src="audioData.view_image" class="rotateImg" :style="styleObj"></image>
			</view>
		</view>
		<view class="player-box">
			<view class="player-slider">
				<view class="player-currentTime">
					{{audioCurTime[0]}}:{{audioCurTime[1]}}
				</view>
				<slider class="slider" min="0" :max="duration"  :value="currentTime" activeColor="#ccc" backgroundColor="#eee"
				 block-size="16" @change="changeProgress" />
				<view class="player-duration">
					<!-- 音频总时长用的是后端的数据，如果用innerAudioContext对象的duration在切换歌曲的时候会出现计算错误的情况 -->
					{{longth}}
					<!-- {{audioDuration[0]}}:{{audioDuration[1]}} -->
				</view>
			</view>
			<view class="play-bar">
				<view class="" @click='pre'>
					<u-icon class="cuIcon-backwardfill" style="color: #ccc;" name="skip-back-left"></u-icon>
				</view>
				<view class="play-menu">
					<u-icon class="cuIcon-playfill" style="color: #ccc;" size="80" :name="isPlay?'pause-circle':'play-circle'" @tap="playMusic"></u-icon>
				</view>
				<view class="" @click='next'>
					<u-icon class="cuIcon-play_forward_fill" style="color: #ccc;"  name="skip-forward-right"></u-icon>
				</view>
			</view>
			<view class="u-text-center" v-if="audioData.name"><text selectable space="emsp">{{audioData.name}} - {{audioData.author}}</text></view>
		</view>
		<view class="play-list">
			<view class="" style="position: relative;">
				播放列表
				<view class="text-underline"> 
				</view>
			</view>
		</view>
		<view class="play-list-content" v-for="(item,index) in audioData" :key="index" @tap="changeAudio(item)">
			<view class="play-list-content-title" >
				<u-icon size="30"
				:name="audioData.name == item.name?'pause-circle':'play-circle'" 
				:label="item.name" 
				:color="audioData.name == item.name?'#ff9900':'#000'"
				:label-color="audioData.name == item.name?'#ff9900':'#000'"
				>
				</u-icon>
			</view>
			<view class="play-list-content-desc">
				<text>{{item.longth}}</text><text>|</text><text>{{item.author}}</text>
			</view>
		</view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import Vue from 'vue'
	import NoSleep from "nosleep.js/dist/NoSleep.min.js";
	Vue.prototype.$NoSleep = NoSleep;
	const audioContext = uni.createInnerAudioContext();
	audioContext.autoplay = false;
	export default {
		data() {
			return {
				audioData: [{
						file: "http://uniapp.lawyerwigged.com/static/xf.mp3",
						id: 0,
						longth: "00:38",
						music_id: 0,
						name: "小芳呀小芳",
						author: "小虎子",
						view_image: "http://p1.music.126.net/_VXBWv-KQ9l1IqCF4AXtLA==/109951167401479634.jpg?param=130y130"
					},
					{
						file: "http://uniapp.lawyerwigged.com/static/kn.mp3",
						id: 1,
						longth: "03:34",
						music_id: 1,
						name: "可能",
						author: "张磊",
						view_image: "http://p2.music.126.net/VLQT6G_d55vwyo19mmYfZw==/109951167536207338.jpg?param=130y130"
					},
					{
						file: "http://uniapp.lawyerwigged.com/static/ppxhn.mp3",
						id: 2,
						longth: "03:31",
						music_id: 2,
						name: "偏偏喜欢你",
						author: "陈百强",
						view_image: "http://p1.music.126.net/eUDl2nMby7PsezK9VYRCtA==/109951163942629932.jpg",
					},
					{
						file: "http://uniapp.lawyerwigged.com/static/sls.mp3",
						id: 3,
						longth: "03:00",
						music_id: 3,
						name: "三两三",
						author: "凌丰",
						view_image: "http://imge.kugou.com/stdmusic/150/20220519/20220519135538970874.jpg",
					},
					{
						file: "http://uniapp.lawyerwigged.com/static/wr.mp3",
						id: 4,
						longth: "03:06",
						music_id: 4,
						name: "无人与我",
						author: "黄静美",
						view_image: "http://imge.kugou.com/stdmusic/150/20220311/20220311155029256404.jpg",
					},
					{
						file: "http://uniapp.lawyerwigged.com/static/jh.mp3",
						id: 5,
						longth: "03:45",
						music_id: 5,
						name: "剑魂",
						author: "李炜",
						view_image: "https://imgessl.kugou.com/stdmusic/20220331/20220331205906637956.jpg",
					},
					{
						file: "http://uniapp.lawyerwigged.com/static/slqm.mp3",
						id: 6,
						longth: "03:55",
						music_id: 6,
						name: "声律启蒙",
						author: "赵照",　
						view_image: "http://p1.music.126.net/ktADGrf6ac5Jm5ciw1uMMQ==/7905488604437879.jpg?param=300x300",
					},
					{
						file: "http://uniapp.lawyerwigged.com/static/mrhj.mp3",
						id: 7,
						longth: "04:21",
						music_id: 7,
						name: "美人画卷",
						author: "大神慧",
						view_image: "http://p2.music.126.net/sZJIb_AAdeODOm8gWW1TNA==/109951165751305295.jpg?param=300x300",
					}
					
					
				],
				duration: '100',
				currentTime: '0',
				audioDuration: ['0', '00'],
				audioCurTime: ['0', '00'],
				longth: '',
				isPlay: false,
				timer: null,
				system: '',
				styleObj: {
					borderRadius: '50%',
					height: '200rpx',
					width: '200rpx',
					position: 'absolute',
					top: '50%',
					left: '50%',
					transform: 'translate(-50%,-50% )',
					transformOrigin: 'center'
				},
				rotateTimer: null,
				rotateDeg: 0
			}
		},
		onUnload() {
			this.isPlay = false
			//audioContext.destroy()
			audioContext.stop();
			// 关屏幕常亮
			// #ifdef APP-PLUS
			uni.setKeepScreenOn({
				keepScreenOn: false
			});
			// #endif
		},
		onLoad(e) {
			// this.$u.api.index().then(res=>{
			// 	console.log(res,'%%')
			// })
		
			
			
			audioContext.src = this.audioData[0].file
			this.longth = this.audioData[0].longth
			this.system = uni.getSystemInfoSync().platform
			audioContext.onEnded((e) => {
				clearInterval(this.timer)
				clearInterval(this.rotateTimer)
				this.timer = null
				this.rotateTimer = null
				this.isPlay = false
				audioContext.seek(0);
				this.audioCurTime = ['0', '00']
				this.currentTime = '0'
				this.next()
			})
			// 保持屏幕常亮
			// #ifdef APP-PLUS
			uni.setKeepScreenOn({
				keepScreenOn: true
			});
			// #endif
			

		},
		onReady() {
			let a = this
			this.audioData.view_image = a.audioData[0].view_image
			this.audioData.author = a.audioData[0].author
			this.audioData.name = a.audioData[0].name
			//console.log(this.audioData.view_image,'@@')
			uni.setNavigationBarTitle({
				title: a.audioData[0].name
			});
		},
		onShow() { 

		},
		mounted(){
			this.noSleep()
		},
		methods: {
			// audio player part : in this part we'd like to show the similar layouts and functions as wangyi music. created by Hsi (1563792476@qq.com)
			// in order to avoid syntax error of playing time , use backend data to show duration time instead of calculating by yourself

			 //屏幕常亮
			  noSleep() {
			
			    let noSleep = new this.$NoSleep();
			
			    document.addEventListener('click',
			
			      function enableNoSleep () {
			
			        noSleep.enable();
			
			        document.removeEventListener('click', enableNoSleep, false);
			
			      },
			
			      false);
			
			  },

			init() {
				this.rotateTimer = setInterval(() => {
					this.rotateDeg++
					this.styleObj.transform = `translate(-50%,-50%) rotate(${this.rotateDeg}deg)`
				}, 50)
				audioContext.play();
				this.timer = setInterval(() => {
					this.currentTime++
					if (this.audioCurTime[1] > 58) {
						this.audioCurTime[0]++
						this.audioCurTime[1] = 0
						this.audioCurTime[1]++
					} else {
						this.audioCurTime[1]++
					}
				}, 1000)
			},
			
			changeAudio(info) {
				this.currentTime = '0'
				this.isPlay = true
				clearInterval(this.timer)
				this.timer = null
				clearInterval(this.rotateTimer)
				this.rotateTimer = null
				this.longth = info.longth
				audioContext.src = info.file
				this.audioCurTime = ['0', '00']
				this.audioData.view_image = info.view_image
				this.audioData.author = info.author
				this.audioData.name = info.name
				this.duration = info.longth.slice(0, 2) * 60 + parseInt(info.longth.slice(3, 6))
				audioContext.seek(0);
				uni.setNavigationBarTitle({
					title: info.name
				});
				this.init()

			},
			
			next() {
				// next song function, the main thought of next song function is that we should find out the index of song which is playing. 
				// first of all , clear the timer and stop rotating cover, and then find out the index 
				clearInterval(this.rotateTimer)
				this.rotateTimer = null
				let src = audioContext.src
				//tips: (complex array may cause performance issues)
				this.audioData.filter((currentValue, index, arr) => {
					if (currentValue.file == src) {
						if (index + 1 >= arr.length) {
							clearInterval(this.timer)
							let timer = null
							this.isPlay = true;
							// once click next button , pause and reset playingtime 
							audioContext.seek(0);
							this.currentTime = '0'
							this.audioCurTime = ['0', '00']
							audioContext.src = this.audioData[0].file
							this.longth = this.audioData[0].longth
							this.audioData.view_image = this.audioData[0].view_image
							this.audioData.author = this.audioData[0].author
							this.audioData.name = this.audioData[0].name
							this.duration = this.audioData[0].longth.slice(0, 2) * 60 + parseInt(this.audioData[0].longth.slice(3, 6))
							uni.setNavigationBarTitle({
								title: this.audioData[0].name
							})
							this.init()
						} else {
							clearInterval(this.timer)
							let timer = null
							this.isPlay = true;
							audioContext.seek(0);
							this.currentTime = '0'
							this.audioCurTime = ['0', '00']
							audioContext.src = this.audioData[index + 1].file
							this.longth = this.audioData[index + 1].longth
							this.audioData.view_image = this.audioData[index + 1].view_image
							this.audioData.author = this.audioData[index + 1].author
							this.audioData.name = this.audioData[index + 1].name
							this.duration = this.audioData[index + 1].longth.slice(0, 2) * 60 + parseInt(this.audioData[index + 1].longth.slice(3, 6))
							uni.setNavigationBarTitle({
								title: this.audioData[index + 1].name
							})
							this.init()
						}
					} else {}
				});
			},
			pre() {
				clearInterval(this.rotateTimer)
				this.rotateTimer = null
				let src = audioContext.src
				this.audioData.filter((currentValue, index, arr) => {
					if (currentValue.file == src) {
						if (index == 0) {
							clearInterval(this.timer)
							let timer = null
							this.isPlay = true;
							audioContext.seek(0);
							this.currentTime = '0'
							this.audioCurTime = ['0', '00']
							audioContext.src = this.audioData[arr.length - 1].file
							this.longth = this.audioData[arr.length - 1].longth
							this.audioData.view_image = this.audioData[arr.length - 1].view_image
							this.audioData.author  = this.audioData[arr.length - 1].author
							this.audioData.name  = this.audioData[arr.length - 1].name
							this.duration = this.audioData[arr.length - 1].longth.slice(0, 2) * 60 + parseInt(this.audioData[arr.length - 1].longth.slice(3, 6))
							uni.setNavigationBarTitle({
								title: this.audioData[arr.length - 1].name
							});
							this.init()
						} else {
							clearInterval(this.timer)
							let timer = null
							this.isPlay = true;
							audioContext.seek(0);
							this.currentTime = '0'
							this.audioCurTime = ['0', '00']
							audioContext.src = this.audioData[index - 1].file
							this.longth = this.audioData[index - 1].longth
							this.audioData.view_image = this.audioData[index - 1].view_image
							this.audioData.author  =  this.audioData[index - 1].author
							this.audioData.name  =  this.audioData[index - 1].name
							this.duration = this.audioData[index - 1].longth.slice(0, 2) * 60 + parseInt(this.audioData[index - 1].longth.slice(3, 6))
							uni.setNavigationBarTitle({
								title: this.audioData[index - 1].name
							});
							this.init()
						}
					} else {}
				});
			},
			playMusic() {
				// reset duration time by clicking midbutton only 
				let duration = audioContext.duration;
				let currentTime = audioContext.currentTime;
				this.duration = duration;
				this.currentTime = currentTime;
				this.audioCurTime[0] = Math.floor(Math.floor(currentTime) / 60);
				this.audioCurTime[1] = Math.floor(currentTime) % 60;
				if (this.isPlay) {
					this.isPlay = false;
					clearInterval(this.timer)
					clearInterval(this.rotateTimer)
					this.timer = null
					this.rotateTimer = null
					audioContext.pause();
				} else {
					this.isPlay = true;
					this.rotateTimer = setInterval(() => {
						this.rotateDeg++
						this.styleObj.transform = `translate(-50%,-50%) rotate(${this.rotateDeg}deg)`
					}, 50)
					audioContext.play();
					this.timer = setInterval(() => {
						this.currentTime++
						if (this.audioCurTime[1] > 58) {
							this.audioCurTime[0]++
							this.audioCurTime[1] = 0
							this.audioCurTime[1]++
						} else {
							this.audioCurTime[1]++
						}
					}, 1000)
				}
			},
			changeProgress(e) {
				// ios 拖动slider 会出现漂移，定位不准，苹果暂时用拖动时暂停播放来规避
				// ios pause music when dragging , Android could still play
				audioContext.seek(e.detail.value);
				// pause music when dragging , in order to load timer repeatly
				if (this.system == 'ios') {
					this.audioCurTime[0] = Math.floor(Math.floor(e.detail.value) / 60);
					this.audioCurTime[1] = Math.floor(e.detail.value) % 60;
					clearInterval(this.timer)
					clearInterval(this.rotateTimer)
					this.timer = null
					this.rotateTimer = null
					this.isPlay = false
					audioContext.pause();
				} else {
					clearInterval(this.timer)
					clearInterval(this.rotateTimer)
					this.timer = null
					this.rotateTimer = null
					this.isPlay = false;
					this.playMusic()
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.play-list-content {
		width: 100%;
		background-color: #fff;
		padding: 36rpx 52rpx 28rpx 52rpx;
		border-bottom: 2rpx solid #EDEDED;
	}
	
	.play-list-content-title {
		font-size: 28rpx;
		margin-bottom: 16rpx;
	}
	
	.play-list-content-desc {
		font-size: 24rpx;
		color: #9599A2;
	}
	
	.play-list-content-desc text:nth-child(2) {
		margin: 0 10rpx;
	}
	
	.text-underline {
		width: 140rpx;
		height: 6rpx;
		background-color: ;
		border-radius: 10rpx;
		position: absolute;
		bottom: 2rpx;
	}
	
	.play-list {
		margin: 20rpx 10rpx;
		font-size: 36rpx;
		color: #343434;
		padding: 20rpx;
	}
	/* #ifdef H5 */
	.player-box {
		position: sticky;
		z-index: 9999;
		top: 80rpx;
		height: 280rpx;
		margin: 30rpx;
		width: 92%;
		background-color: #fff;
		padding: 20rpx;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	/* #endif */
	/* #ifndef H5 */
	.player-box {
		position: sticky;
		z-index: 9999;
		top: 0rpx;
		height: 280rpx;
		margin: 30rpx;
		width: 92%;
		background-color: #fff;
		padding: 20rpx;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	/* #endif */
	.player-videodisc {
		position: relative;
		width: 590rpx;
		height: 590rpx;
	}
	
	.player-videodisc image {
		width: 590rpx;
		height: 590rpx;
	}
	
	.player-slider {
		width: 650rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.slider {
		flex: 1;
	}
	
	.play-bar {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 70rpx;
		font-size: 30px;
		margin-top: 40rpx;
	}
	
	.play-menu {
		width: 100rpx;
		height: 100rpx;
		border: 1px solid #FFFFFF;
		border-radius: 50%;
		text-align: center;
		line-height: 100rpx;
	}

</style>
